<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/ZRT.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/Product.css" />
		<script src="Magnifier.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			#small-box {
				width: 400px;
				height: 400px;
				background-image: url(../img/15218EOQG1688233.png);
				background-size: 400px 400px;
				background-repeat: no-repeat;
				position: absolute;
				top: 20px;
				/* 	top:100px;
				left:100px; */
			}

			#mask {
				width: 100px;
				height: 100px;
				background-color: red;
				opacity: 0.3;
				/* display: none; */
				position: absolute;
				cursor: move;
			}

			#big-box {
				width: 400px;
				height: 400px;
				background-image: url(../img/15218EOQG1688233.png);
				background-size: 1600px 1600px;
				position: absolute;
				z-index: 99;
				top: 20px;
				left: 500px;
				display: block;
				/* background-color: #FF0000; */
				/* display: none; */
			}
		</style>
	</head>
	<body>
		<img src="../img/15218EOQG1688233.png" style="display: none;" id="img">
		<div class="header2">
			<div class="logo2">
				<img src="../img/logo.png">
			</div>
			<div class="nav2">
				<ul class="max-nav2">
					<li>
						<a class="firstNav">首页</a>
					</li>
					<li>
						<a href="http://www.baidu.com" class="firstNav"><span>护肤</span></a>
					</li>
					<li>
						<a href="http://www.baidu.com" class="firstNav"><span>面膜</span></a>
					</li>
					<li>
						<a href="http://www.baidu.com" class="firstNav"><span>彩妆</span></a>
					</li>
					<li>
						<a href="http://www.baidu.com" class="firstNav"><span>男士</span></a>
					</li>
					<li class="secList">
						<a href="http://www.baidu.com"="club firstNav">会员俱乐部</a>
						<ol>
							<li>
								<a href="">会员礼遇</a>
							</li>
							<li>
								<a href="">会员章程</a>
							</li>
							<li>
								<a href="">积分规则</a>
							</li>
						</ol>
					</li>
					<li class="secList">
						<a href="http://www.baidu.com" class="about firstNav">关于自然堂</a>
						<ol>
							<li>
								<a href="">品牌故事</a>
							</li>
							<li>
								<a href="">品牌资讯</a>
							</li>
							<li>
								<a href="">品牌价值观</a>
							</li>
						</ol>
					</li>
					<li>
						<a href="http://www.baidu.com" class="firstNav">专柜查询</a>
					</li>
					<li>
						<a href="http://www.baidu.com" class="firstNav">防伪查询</a>
					</li>
				</ul>
				<ul class="min-nav2">
					<li><a href="http://www.baidu.com"></a><img src="../img/search.png"></li>
					<li><a href="http://www.baidu.com"></a><img src="../img/shopping-cart.png"></li>
					<li><a href="http://www.baidu.com"></a><img src="../img/my.png"></li>
				</ul>
			</div>
		</div>
		<div id="hea"></div>

		<div class="productt">
			<!-- 放大镜 -->
			<div class="left-box">
				<div id="small-box">
					<div id="mask">

					</div>
				</div>
				<div id="big-box">

				</div>
			</div>
			<div class="Details">
				<h3>「咖啡因精华乳」</h3>
				<h4>99%高纯度咖啡因 赋能年轻紧致</h4>
				<div class="box2">
					<p class="title">男士咖啡因活力紧致精华乳</p>
					<p style="font-weight: 600px;" class="price">￥160</p>
					<span class="ml">70ml</span>
					<div class="box3">
						<p>
							<span>+</span>&nbsp;&nbsp;
							<i class="num">1</i>
							&nbsp;&nbsp;<span>-</span>
						</p>
						<p class="join" style="z-index: 1000;">加入购物车</p>
						<p>立即购买</p>
					</div>
					<p class="tu">
						<img src="../img/heart.png">
						<img src="../img/chart.png">
						<img src="../img/share.png">
					</p>
				</div>

			</div>
			
		</div>
		<div class="img">
			<img src="../img/changtu.jpg">
		</div>
		<div class="Plant">
			<p>好物种草(8) <span>查看全部></span></p>
			<ul>
				<li>
					<p>
						<img src="../img/4-1;·.jpg">
					</p>
					<h4>拯救熬夜脸|我有他就够了</h4>
				</li><!--  -->
				<li>
					<p><img src="../img/2-1;.jpg"></p>

					<h4>零点还不睡的姐妹们，没有它你们真的还好吗</h4>
				</li>
				<li>
					<p><img src="../img/1-1;.jpg"></p>
					<h4>熬夜通宵也不垮，这个面膜让你重回18岁</h4>
				</li>
				<li>
					<p><img src="../img/5-1..jpg"></p>
					<h4>国风口红也太酷了吧，见证了红楼爱情哦！</h4>
				</li>
				<li>
					<p><img src="../img/4-1..jpg"></p>
					<h4>我预感这只绝美微雕石榴红要断货！好看哭惹</h4>
				</li>
				<li>
					<p><img src="../img/3-1..jpg"></p>
					<h4>红楼梦联名口红绝美雕花！美到不舍得用</h4>
				</li>
			</ul>
		</div>
		<div class="recommend">
			<h3>相关推荐</h3>
			<h4>1</h4>
			<div class="box4">
				<img src="../img/15218IDPm0412366.png">
				<ul>
					<li class="box5">
						<h3>喜马拉雅冰川透爽保湿洁面咖喱</h3>
						<h4>￥59|160ml</h4>
						<button type="button" class="btn-2">加入购物车</button>
						<button type="button" class="btn-3">立即购单</button>
					</li>
				</ul>


			</div>
		</div>

		</div>

		<div class="img">
			<img src="../img/changtu.jpg">
		</div>
		<div class="Plant">
			<p>好物种草(8) <span>查看全部></span></p>
			<ul>
				<li>
					<p>
						<img src="../img/4-1;·.jpg">
					</p>
					<h4>拯救熬夜脸|我有他就够了</h4>
				</li><!--  -->
				<li>
					<p><img src="../img/2-1;.jpg"></p>

					<h4>零点还不睡的姐妹们，没有它你们真的还好吗</h4>
				</li>
				<li>
					<p><img src="../img/1-1;.jpg"></p>
					<h4>熬夜通宵也不垮，这个面膜让你重回18岁</h4>
				</li>
				<li>
					<p><img src="../img/5-1..jpg"></p>
					<h4>国风口红也太酷了吧，见证了红楼爱情哦！</h4>
				</li>
				<li>
					<p><img src="../img/4-1..jpg"></p>
					<h4>我预感这只绝美微雕石榴红要断货！好看哭惹</h4>
				</li>
				<li>
					<p><img src="../img/3-1..jpg"></p>
					<h4>红楼梦联名口红绝美雕花！美到不舍得用</h4>
				</li>
			</ul>
		</div>
		<div class="recommend">
			<h3>相关推荐</h3>
			<h4>1</h4>
			<div class="box4">
				<img src="../img/15218IDPm0412366.png">
				<ul>
					<li class="box5">
						<h3>喜马拉雅冰川透爽保湿洁面咖喱</h3>
						<h4>￥59|160ml</h4>
						<button type="button" class="btn-2">加入购物车</button>
						<button type="button" class="btn-3">立即购单</button>
					</li>
				</ul>


			</div>
		</div>


		<div id="last"></div>
	</body>
</html>
<script>
	$("#last").load("Tail.html");

	$("#hea").load("header.html", function() {

		$(window).scroll(function() {
			if ($(this).scrollTop() > 100) {
				$(".header2").css("display", "flex");
			} else {
				$(".header2").css("display", "none");
			}
		})
	});

	$(".top li").on("click", function() {
		if ($(this).index() == 0) {
			$(".left2").css("display", "none");
			$(".left1").css("display", "block");

		} else {
			$(".left1").css("display", "none");
			$(".left2").css("display", "block");
		}
	})
	
	
</script>
